<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"></style>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>请选择您的地址:</h1>
    <select id="pro"></select>
    <select id="city"></select>
    <select id="area"></select>
    <select id="street"></select>

    <script>

    // 先获取省份数据
    $.ajax({
        type: 'get',
        url: './php/address.php',
        dataType: 'json',
        async: false, // 同步加载
        success:function(data){
            // console.log(data);
            // 清空之前的数据
            $('#pro').empty();
            // 遍历省份数据
            for (var i = 0; i < data.length; i++) {
                $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo('#pro');
            }
        },
        error: function (){
            alert('AJAX 执行失败!');
        }
    });


    // 绑定事件
    $('#pro,#city,#area').change(function(){
        // 一触发chenge事件,就清空之前的选项
        $(this).nextAll('select').show().empty();

        // 获取当前的value值
        var upid = $(this).val();
        // console.log(upid);
        
        // console.log($(this)); // 触发change事件的select框体
        var _this = $(this);
        
        // 请求下一级数据
        $.ajax({
            type: 'get',
            url: './php/address.php',
            dataType: 'json',
            data: 'upid='+upid,
            success:function(data){
                // 如果下一级木有数据,就隐藏后面的下拉框
                if (!data) {
                    _this.nextAll('select').hide();
                    return;
                }
                // console.log(data);
                // console.log($(this).constructor); // JQ对象
                // console.log($);
                // console.log(_this); // SELECT框体对象
                
                // 遍历下一级数据
                for (var i = 0; i < data.length; i++) {
                    $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(_this.next('select'));
                }
                // 自动触发后面的select的change事件
                _this.next('select').trigger('change');
            },
            error: function (){
                alert('AJAX 执行失败!');
            }
        });
    });

    $('#pro').trigger('change');
    
    </script>
</body>
</html>